import React, { useState, useEffect } from 'react';
import { ApiService } from '../services/api';
import { Spin } from 'antd';
import './CooperativeBrands.css';

const CooperativeBrands = () => {
  const [brands, setBrands] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchBrands = async () => {
      try {
        setLoading(true);
        const response = await ApiService.getCooperativeBrandList();
        
        if (response.code === '0000' && response.data) {
          // 按serNum排序
          const sortedBrands = response.data.sort((a, b) => a.serNum - b.serNum);
          setBrands(sortedBrands);
        } else {
          setError('获取合作品牌数据失败');
        }
      } catch (err) {
        console.error('获取合作品牌失败:', err);
        setError('网络请求失败');
      } finally {
        setLoading(false);
      }
    };

    fetchBrands();
  }, []);

  if (loading) {
    return (
      <div className="cooperative-brands">
        <div className="container">
          <div className="section-header">
            <h2>合作品牌</h2>
          </div>
          <div className="brands-loading">
            <Spin />
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="cooperative-brands">
        <div className="container">
          <div className="section-header">
            <h2>合作品牌</h2>
          </div>
          <div className="brands-error">
            <p>{error}</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="cooperative-brands">
      <div className="container">
        <div className="section-header">
          <h2>合作品牌</h2>
        </div>
        
        {brands.length > 0 ? (
          <div className="brands-container">
            <div className="brands-scroll">
              {/* 第一组品牌 */}
              {brands.map(brand => (
                <div key={`first-${brand.brandId}`} className="brand-item">
                  <img 
                    src={brand.picUrl} 
                    alt={brand.brandName}
                    title={brand.brandName}
                    onError={(e) => {
                      e.target.style.display = 'none';
                    }}
                  />
                </div>
              ))}
              {/* 第二组品牌（用于无缝滚动） */}
              {brands.map(brand => (
                <div key={`second-${brand.brandId}`} className="brand-item">
                  <img 
                    src={brand.picUrl} 
                    alt={brand.brandName}
                    title={brand.brandName}
                    onError={(e) => {
                      e.target.style.display = 'none';
                    }}
                  />
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="no-brands">
            <p>暂无合作品牌</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default CooperativeBrands;
